<html>
<head>
    <meta charset="utf-8">
    <title>{ms:global.name/}</title>
    <#include "head-file.htm" />
    <!--引入vue库-->
    <script type="text/javascript" src="/static/plugins/vue/2.6.9/vue.min.js"></script>
    <!--引入element-ui库-->

    <script src="${base}/static/plugins/element-ui/2.15.8/index.min.js"></script>
    <link rel="stylesheet" href="/static/plugins/element-ui/2.15.8/theme-chalk/index.min.css">

    <!--网络请求框架-->
    <script src="/static/plugins/axios/0.18.0/axios.min.js"></script>
    <script src="/static/plugins/qs/6.6.0/qs.min.js"></script>
    <script src="/static/plugins/ms/2.0/ms.umd.js"></script>
    <script src="/static/plugins/ms/2.0/ms-el-form.umd.js"></script>
    <script>
        window.ms.login="{ms:global.host/}mdiyPage/login.do";
    </script>
</head>

<body>

<div id="app" v-cloak>
    <!--表单-start-->
    <el-main>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right"
                 size="small">
            <el-row
                    :gutter="0"
                    justify="start" align="top">
                <el-col :span="12">
                    <el-form-item label="用户名" prop="peopleName">
                        <el-input
                                v-model="form.peopleName"
                                :disabled="true"
                                :readonly="false"
                                :clearable="true"
                                placeholder="请输入用户名">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="会员类别" prop="puLevel">
                        <el-select v-model="form.puLevel"
                                   @visible-change="puLevelOptionsGet"
                                   :filterable="false"
                                   :disabled="true"
                                   :multiple="false" :clearable="true"
                                   placeholder="请选择会员类别">
                            <el-option v-for='item in puLevelOptions' :key="item.dictValue"
                                       :value="item.dictValue"
                                       :label="item.dictLabel"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row
                    :gutter="0"
                    justify="start" align="top">
                <el-col :span="12">
                    <el-form-item label="手机号" prop="peoplePhone">
                        <el-input
                                v-model="form.peoplePhone"
                                :disabled="true"
                                :readonly="false"
                                :clearable="true"
                                placeholder="请输入手机号">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证号" prop="puCard">
                        <el-input
                                v-model="form.puCard"
                                :disabled="false"
                                :readonly="false"
                                :clearable="true"
                                placeholder="请输入身份证号">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row
                    :gutter="0"
                    justify="start" align="top">
                <el-col :span="12">
                    <el-form-item label="真实姓名" prop="puRealName">
                        <el-input
                                v-model="form.puRealName"
                                :disabled="false"
                                :readonly="false"
                                :clearable="true"
                                placeholder="请输入真实姓名">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="生日" prop="puBirthday">
                        <el-date-picker
                                v-model="form.puBirthday"
                                placeholder="请选择生日" :readonly="false"
                                :disabled="false"
                                :editable="true"
                                :clearable="true"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                type="date">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row
                    :gutter="0"
                    justify="start" align="top">
                <el-col :span="12">
                </el-col>
                <el-col :span="12">
                </el-col>
            </el-row>
            <el-form-item label="用户头像" prop="puIcon">
                <el-upload
                        :file-list="form.puIcon"
                        :action="ms.base+'/file/upload.do'"
                        :on-remove="puIconhandleRemove"
                        :style="{width:''}"
                        :limit="1"
                        :disabled="false"
                        :data="{uploadPath:'/people/user','isRename':true,'appId':true}"
                        :on-success="puIconBasicPicSuccess"
                        :on-exceed="puIconhandleExceed"
                        accept="image/*"
                        list-type="picture-card">
                    <div slot="tip" >最多上传1张头像</div>
                </el-upload>
            </el-form-item>

        </el-form>
    </el-main>
    <el-header >
        <el-button type="primary" icon="iconfont icon-baocun" size="mini" @click="save()"
                   :loading="saveDisabled">保存
        </el-button>
    </el-header>
    <!--表单-stop-->
</div>
</body>
</html>
<script>
    var form = new Vue({
        el: '#app',
        data: function () {
            return {
                loading: false,
                saveDisabled: false,
                //表单数据
                form: {
                    // 用户名
                    peopleName: '',
                    // 密码
                    peoplePassword: '',
                    // 手机号
                    peoplePhone: '',
                    // 邮箱
                    // peopleMail: '',
                    // 真实姓名
                    puRealName: '',
                    // 生日
                    puBirthday: '',
                    // 身份证号
                    puCard: '',
                    // 会员类别
                    puLevel: '',
                    // 审核状态
                    peopleState: 0,
                    // 用户头像
                    puIcon: '',
                    // 介绍
                    introduce: '',
                },
                puIcon: null,
                puLevelOptions: [],
                rules: {
                    // 用户名
                    peopleName: [{"required": true, "message": "用户名不能为空"}, {
                        "min": 0,
                        "max": 20,
                        "message": "用户名长度必须为0-20"
                    }],
                    // 密码
                    peoplePassword: [],
                    // 手机号
                    peoplePhone: [{"required": true, "message": "手机号不能为空"}, {
                        "pattern": /^1[34578]\d{9}$/,
                        "message": "手机号格式不匹配"
                    }, {"min": 11, "max": 11, "message": "手机号长度必须为11位"}],
                    // 真实姓名
                    puRealName: [{"min": 0, "max": 20, "message": "真实姓名长度必须为0-20"}],
                    // 邮箱
                    peopleMail: [{
                        "pattern": "^([a-z0-9A-Z]+[-|\\.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-zA-Z]{2,}$",
                        "message": "邮箱格式不匹配"
                    }, {
                        "min": 1,
                        "max": 50,
                        "message": "邮箱长度必须为1-50"
                    }],
                },
            }
        },
        watch: {},
        computed: {},
        methods: {
            //上传超过限制
            puIconhandleExceed: function (files, fileList) {
                this.$notify({
                    title: '当前最多上传1张头像',
                    type: 'warning'
                });
            },
            //puIcon文件上传完成回调
            puIconBasicPicSuccess: function (response, file, fileList) {
                if (response.result) {
                    this.puIcon = response.data;
                    this.form.puIcon = [];
                    this.form.puIcon.push({url: file.url, path: response.data, uid: file.uid});
                } else {
                    this.$notify({
                        title: response.msg,
                        type: 'warning'
                    });
                }
            },
            puIconhandleRemove: function (file, files) {
                var index = -1;
                index = this.form.puIcon.findIndex(function (text) {
                    return text == file;
                });

                if (index != -1) {
                    this.form.puIcon.splice(index, 1);
                }
            },
            //保存
            save: function () {
                var that = this;
                //请求update接口
                var url = "/people/user/update.do"
                this.$refs.form.validate(function (valid) {
                    if (valid) {
                        that.saveDisabled = true;
                        var data = JSON.parse(JSON.stringify(that.form));
                        data.puIcon = that.puIcon;
                        for (key in data) {
                            if (!data[key]) {
                                delete data[key];
                            }
                        }
                        ms.http.post(url, data).then(function (data) {
                            if (data.result) {
                                that.$notify({
                                    title: "成功",
                                    message: "保存成功",
                                    type: 'success'
                                });
                            } else {
                                that.$notify({
                                    title: "错误",
                                    message: data.msg,
                                    type: 'warning'
                                });
                            }
                            that.saveDisabled = false;
                        });
                    } else {
                        return false;
                    }
                })
            },
            //获取当前用户
            get: function () {
                var that = this;
                this.loading = true
                ms.http.get("/people/user/info.do").then(function (res) {
                    that.loading = false
                    if (res.result && res.data) {
                        that.form = res.data;
                        that.puIcon = that.form.puIcon;
                        if (that.puIcon) {
                            that.form.puIcon = [{url: that.puIcon, path: that.puIcon, uid: ""}];
                        }
                    }
                });
            },
            //获取puLevel数据源
            puLevelOptionsGet: function () {
                var that = this;
                ms.http.get(ms.base + '/mdiy/dict/list.do', {dictType: '用户等级类型', pageSize: 99999}).then(function (res) {
                    that.puLevelOptions = res.data.rows;
                });
            },
        },
        created: function () {
            var that = this;
            this.puLevelOptionsGet();
            this.get();

        },
        mounted: function () {

        }
    });
</script>